<template>
  <div class="departments">
    <!-- 卡片 -->
    <el-card>
      <!-- tabs -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="组织架构" name="first">
          <!-- layout 栅格(shan ge)布局 -->
          <el-row type="flex" justify="space-between">
            <el-col :span="6">
              <h4>江苏传智播客教育科技股份有限公司</h4>
            </el-col>
            <el-col class="right-col" :span="6">
              <span class="leader">负责人</span>
              <!-- 下拉菜单 -->
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button
                      type="text"
                      @click="dialogFormVisible = true"
                    >添加子部门</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
          <!-- 和底部的内容分割开来 -->
          <el-divider />
          <!-- tree -->
          <el-tree
            :data="departs"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <template #default="{ data }">
              <el-row class="tree-row" type="flex" justify="space-between">
                <el-col :span="6">
                  {{ data.name }}
                </el-col>
                <el-col class="right-col" :span="6">
                  <span class="leader" :span="6">{{ data.manager }}</span>
                  <!-- 下拉菜单 -->
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>
                        <el-button
                          type="text"
                          @click="addChildren(data)"
                        >添加子部门</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button
                          type="text"
                          @click="enterEdit(data)"
                        >查看部门</el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button
                          type="text"
                          @click="del(data)"
                        >删除部门</el-button>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row></template>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      @closed="closed"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item
          label="部门名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="部门编码"
          :label-width="formLabelWidth"
          prop="code"
        >
          <el-input v-model="form.code" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="部门负责人"
          :label-width="formLabelWidth"
          prop="manager"
        >
          <el-select
            v-model="form.manager"
            placeholder="请选择活动区域"
            @focus="onFocus"
          >
            <el-option
              v-for="item in managers"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="部门介绍"
          :label-width="formLabelWidth"
          prop="introduce"
        >
          <el-input v-model="form.introduce" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onClear">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDepartments,
  addDepartments,
  getDepartmentById,
  editDepartment,
  delDepartment
} from '@/api/departments'
import { getEmployeeSimple } from '@/api/employees'
export default {
  name: 'Departments',
  data() {
    return {
      managers: [],
      activeName: 'first',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogFormVisible: false,
      // 表单数据
      form: {
        code: '', // 部门编码
        introduce: '', // 部门介绍
        manager: '', // 部门负责人
        name: '', // 部门名称
        pid: '' // 父级部门id
      },
      formLabelWidth: '120px',
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      rules: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 50 个字符',
            trigger: 'change'
          }
        ],
        code: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 50 个字符',
            trigger: 'change'
          }
        ],
        introduce: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {
            min: 1,
            max: 300,
            message: '长度在 1 到 300 个字符',
            trigger: 'change'
          }
        ],
        manager: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title() {
      return this.form.id ? '编辑部门' : '新增部门'
    }
  },
  created() {
    this.getData()
  },

  methods: {
    async getData() {
      const res = await getDepartments()
      // console.log(res)
      const res1 = res.depts.filter((v) => v.pid !== '-1')
      const root = res1.filter((v) => v.pid === '')
      root.forEach((v) => {
        v.children = res1.filter((vc) => vc.pid === v.id)
      })
      this.departs = root
    },
    handleNodeClick(data) {
      console.log(data)
    },
    async onFocus() {
      const res = await getEmployeeSimple()
      this.managers = res
    },
    // 编辑功能 要传id
    async enterEdit(data) {
      this.dialogFormVisible = true
      const res = await getDepartmentById(data.id)
      this.form = { ...res }
    },
    submitForm() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          if (this.form.id) {
            // 提交编辑
            const res = await editDepartment(this.form)
          } else {
            // 新增顶级节点 的接口
            const res = await addDepartments(this.form)
          }
          this.getData()
          this.onClear()
          this.$message.success(`${this.title}成功`)
        } else {
          this.$message.error('数据格式有误,请检查哦!')
          return false
        }
      })
    },
    // 清空表单
    onClear() {
      (this.form = {
        code: '', // 部门编码
        introduce: '', // 部门介绍
        manager: '', // 部门负责人
        name: '', // 部门名称
        pid: '' // 父级部门id
      }),
      (this.dialogFormVisible = false)
    },
    // 增加子节点
    addChildren(data) {
      this.form.pid = data.id
      this.dialogFormVisible = true
    },
    async del(data) {
      await delDepartment(data.id)
      this.getData()
    },
    closed() {
      this.form = {
        code: '', // 部门编码
        introduce: '', // 部门介绍
        manager: '', // 部门负责人
        name: '', // 部门名称
        pid: '' // 父级部门id
      }
    }
  }
}
</script>

<style lang="scss">
.departments {
  .el-tabs__content {
    padding: 40px;
    padding-top: 20px;
    h4 {
      margin: 0;
    }
    .right-col {
      text-align: right;
    }
    .leader {
      font-size: 14px;
      margin-right: 10px;
    }
    .tree-row {
      flex: 1;
    }
  }
}
</style>
